<template>
  <div class="home">
    <div class="header">
      <van-nav-bar class="app-nav-bar" @click-right="addArticle">
        <template #title>
          <van-search
            v-model="value"
            shape="round"
            placeholder="请输入搜索关键词"
          />
        </template>
        <template #right>
          <van-icon name="plus" size="18"   color="red"/>
        </template>
      </van-nav-bar>
      <van-popup v-model="show" position='bottom' :style="{ height: '30%' }" round>内容</van-popup>
    </div>
    <div class="nav">
      <van-tabs v-model="active">
        <van-tab 
          :title="channel.name"
          v-for="channel of channels"
          :key='channel.id'
        >
          <articleList :channel='channel' />
        </van-tab>

      </van-tabs>
    </div>
  </div>
</template>
<script>
import {userChannels} from '@/api/user'
export default {
  data() {
    return {
      value: "",
      show:false,
      active:0,
      channels:[]
    };
  },
  components:{
    articleList:()=>import('@/components/article-list.vue')
  },
  methods:{
    // 获取用户频道
    getuserChannels(){
      userChannels().then(res=>{
        this.channels = res.data.data.channels
        console.log(res.data.data)
      })
    },
    addArticle(){
      this.show = true
      console.log('000')
    }
  },
  created(){
    this.getuserChannels()
  }
};
</script>

<style lang="less" scoped>
.home {
  .header {
    /deep/ .van-nav-bar__title {
      max-width: unset;
    }
    .van-search {
      background-color: transparent;
      width: 277px;
      height: 37px;
    }
    .van-icon{
      
    }
  }
}
</style>